<template>
  <div class="takeout_inside">
    <landing-page
      style="z-index: -1;position: absolute;"
      v-if="isPrint"
      :printData="printData"
      @printCompelete="printCompelete"
    ></landing-page>
    <data-dialog :postData="dialogData" v-if="isShowDialog" @close="isShowDialog = false"></data-dialog>
    <div class="date">
      <date-view></date-view>
    </div>

    <div class="main">
      <div class="status">
        <div class="title color-orange">/外带菜状态</div>
        <line-view class="hr"></line-view>
        <el-table stripe :data="foods">
          <el-table-column label="序号" align="center" width="60px;">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center">
            <template slot-scope="scope">
              <span @click="showDialog(scope.row.orderId)" class="under-line">{{scope.row.mealId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="菜品名" align="center" width="180px;">
            <template slot-scope="scope">
              <span>{{scope.row.dishName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="上菜用时" align="center">
            <template slot-scope="scope">
              <span class="c_cyan">{{scope.row.orderTime | countTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="菜品状态" align="center">
            <template slot-scope="scope">
              <span
                :class="constData.foodsStatus[scope.row.taskStatus].class"
              >{{constData.foodsStatus[scope.row.taskStatus].name}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="incomplete">
        <div class="title color-blue">/未完成订单</div>
        <line-view class="hr"></line-view>
        <el-table stripe :data="orders1">
          <el-table-column label="序号" align="center" width="80px;">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center" width="100px;">
            <template slot-scope="scope">
              <span @click="showDialog(scope.row.orderId)" class="under-line">{{scope.row.mealId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="110px;">
            <template slot-scope="scope">
              <span class="color-blue">{{scope.row.orderTime | cutTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="制度进度" align="center" width="110px;">
            <template slot-scope="scope">
              <span
                class="color-blue"
              >{{scope.row.totalNum - scope.row.incompleteNum + '/' + scope.row.totalNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" width="120px;">
            <template slot-scope="scope">
              <span
                @click="orderStatusClick(scope.row, 'notify')"
                :class="scope.row | filterOrderClass"
              >{{scope.row | filterOrderName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="打印" align="center">
            <template slot-scope="scope">
              <img
                class="dayin"
                src="../assets/images/1.5.2/u6705.png"
                alt
                @click="print(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="wait">
        <div class="title color-blue">/待取餐订单</div>
        <line-view class="hr"></line-view>
        <el-table stripe :data="orders2">
          <el-table-column label="序号" align="center" width="80px;">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center" width="100px;">
            <template slot-scope="scope">
              <span @click="showDialog(scope.row.orderId)" class="under-line">{{scope.row.mealId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="110px;">
            <template slot-scope="scope">
              <span class="color-blue">{{scope.row.orderTime | cutTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="制度进度" align="center" width="110px;">
            <template slot-scope="scope">
              <span
                class="color-blue"
              >{{scope.row.totalNum - scope.row.incompleteNum + '/' + scope.row.totalNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" width="120px;">
            <template slot-scope="scope">
              <span
                @click="orderStatusClick(scope.row, 'complete')"
                :class="scope.row | filterOrderClass"
              >{{scope.row | filterOrderName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="打印" align="center">
            <template slot-scope="scope">
              <img
                class="dayin"
                src="../assets/images/1.5.2/u6705.png"
                alt
                @click="print(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <confirm-dialog
      v-show="dialogSwitch"
      @close="dialogSwitch = false"
      :tip="dialogTip"
      @confirm="_confirmDialog"
    />
  </div>
</template>

<script>
import LineView from "../components/LineView";
import DateView from "../components/DateView";
import DataDialog from "../components/DataDialog";
import ConfirmDialog from "../components/ConfirmDialog";
import LandingPage from "../components/LandingPage";
import { formatTime, getTimeDiffer } from "../util/index";
import { getAllStock, getAllOrder, updateOrderStatus } from "../api/index";

// 21 等待中
// 22 进行中
// 23 请取餐
// 24 取餐超时
// 26 已完成、已取餐
const orderStatus = {
  21: { name: "等待中", class: "c_yellow" },
  // 22: { name: "进行中", class: "c_cyan" },
  23: { name: "取餐完毕", class: "c_green green_button" },
  24: { name: "取餐超时", class: "c_red" },
  26: { name: "已完成", class: "c_gray" }
};

const foodsStatus = {
  21: { name: "待分配", class: "c_yellow" },
  22: { name: "制作中", class: "c_yellow" },
  23: { name: "制作完成", class: "c_cyan" },
  32: { name: "已叫车", class: "c_cyan" },
  33: { name: "车已到", class: "c_cyan" },
  34: { name: "上车中", class: "c_cyan" },
  37: { name: "已上车", class: "c_cyan" },
  38: { name: "云-运输中", class: "c_cyan" },
  39: { name: "已送到", class: "c_green" },
  310: { name: "下车中", class: "c_green" },
  314: { name: "已完成", class: "c_gray" },
  61: { name: "待运输", class: "c_cyan" },
  63: { name: "地-运输中", class: "c_cyan" },
  71: { name: "已选取", class: "c_blue" },
  72: { name: "配送中", class: "c_blue" },
  316: { name: "待取餐", class: "c_blue" },
  317: { name: "已取餐", class: "c_green" }
};
export default {
  data() {
    return {
      orders: [],
      orders1: [],
      orders2: [],
      foods: [],
      constData: {
        orderStatus,
        foodsStatus
      },
      isShowDialog: false,
      dialogSwitch: false,
      dialogTip: "",
      isPrint: true,
      printData: null,
      dialogType: "",
      dialogData: [],
      clickOrder: null,
      timer: null
    };
  },
  components: { LineView, DateView, DataDialog, ConfirmDialog, LandingPage },
  created() {
    this.getOrders();
    this.getFoods();
    this.timer = setInterval(() => {
      if (!this.isShowDialog) {
        this.getOrders();
        this.getFoods();
      }
    }, 10000);
  },
  mounted() {},
  methods: {
    async getOrders() {
      let res = await getAllOrder();
      if (res.statusCode === "000000") {
        let data = res.data.orderList;
        let orders1 = [];
        let orders2 = [];
        data.forEach(item => {
          if (item.orderStatus == 21 || item.orderStatus == 22) {
            orders1.push(item);
          } else if (
            item.orderStatus == 23 ||
            item.orderStatus == 24 ||
            item.orderStatus == 26
          ) {
            orders2.push(item);
          }
        });
        this.orders1 = orders1;
        this.orders2 = orders2;
      }
    },
    async getFoods() {
      let res = await getAllStock();
      if (res.statusCode === "000000") {
        this.foods = res.data.detailList;
      }
    },
    orderStatusClick(order, type) {
      if (
        !(
          (order.orderStatus == 22 && order.incompleteNum == 0) ||
          order.orderStatus == 23
        )
      ) {
        return;
      }
      this.dialogType = type;
      if (type == "notify") {
        this.dialogTip = "通知" + order.mealId + "取餐，请确认？";
      } else {
        this.dialogTip = order.mealId + "取餐完毕，请确认？";
      }

      this.dialogSwitch = true;
      this.clickOrder = order;
    },
    async _confirmDialog() {
      if (this.dialogType === "notify") {
        let data = {
          orderId: this.clickOrder.orderId,
          orderStatus: 23
        };
        let res = await updateOrderStatus(data);
        if (res.statusCode === "000000") {
          this.$message.success("成功");
          this.getOrders();
        } else {
          this.$message.warning("失败");
        }
      } else if (this.dialogType === "complete") {
        let data = {
          orderId: this.clickOrder.orderId,
          orderStatus: 26
        };
        let res = await updateOrderStatus(data);
        if (res.statusCode === "000000") {
          this.$message.success("成功");
          this.getOrders();
        } else {
          this.$message.warning("失败");
        }
        console.log(this.clickOrder);
      } else if (this.dialogType === "print") {
        this.isPrint = true;
      }
      this.dialogSwitch = false;
      //确认回调
    },
    print(item) {
      this.dialogType = "print";
      this.dialogTip = "打印" + item.no + "小票，请确认？";
      let printData = { ...item };
      printData.foods = [
        { name: "香菇鸡腿饭", num: 1, price: 18 },
        { name: "红烧牛肉饭", num: 2, price: 18 },
        { name: "麻婆豆腐饭", num: 1, price: 18 },
        { name: "香菇鸡腿饭", num: 1, price: 18 },
        { name: "红烧牛肉饭", num: 2, price: 18 },
        { name: "麻婆豆腐饭", num: 1, price: 18 }
      ];
      this.printData = printData;
      this.dialogSwitch = true;
    },
    printCompelete() {
      console.log("printCompelete");
      this.isPrint = false;
    },
    async showDialog(orderId) {
      let data = { orderId };
      let res = await getAllStock(data);
      if (res.statusCode === "000000") {
        this.dialogData = res.data.detailList;
        this.isShowDialog = true;
      }
    }
  },
  filters: {
    countTime(time) {
      let start = +new Date(time);
      let end = +new Date();
      return getTimeDiffer(start, end);
    },
    cutTime(time) {
      return time.split(" ")[1];
    },
    filterOrderClass(item) {
      let status = item.orderStatus;
      let className = "";
      if (status == 22) {
        let incompleteNum = item.incompleteNum;
        if (incompleteNum == 0) {
          className = "c_green green_button";
        } else {
          className = "c_cyan";
        }
      } else {
        className = orderStatus[status].class;
      }
      return className;
    },
    filterOrderName(item) {
      let status = item.orderStatus;
      let name = "";
      if (status == 22) {
        let incompleteNum = item.incompleteNum;
        if (incompleteNum == 0) {
          name = "通知取餐";
        } else {
          name = "进行中";
        }
      } else {
        name = orderStatus[status].name;
      }
      return name;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.takeout_inside {
  * {
    margin: 0;
    padding: 0;
  }

  height: 1080px;
  width: 1920px;
  box-sizing: border-box;
  color: #fff;
  text-align: left;
  padding: 30px;

  .main {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .status,
    .incomplete,
    .wait {
      width: 600px;
      height: 100%;
    }
  }

  .date {
    position: absolute;
    left: 1600px;
    top: 30px;
    width: 300px;
  }
}
</style>

<style lang="less">
.takeout_inside {
  background-color: #05082d;

  .title {
    font-weight: 600;
    font-size: 32px;
  }

  .hr {
    margin: 20px 0;
    border-bottom: 2px solid #237493;
  }

  .dayin {
    margin-top: 14px;
    width: 32px;
  }

  .green-border {
    // display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid #00ff99;
  }

  .color-hblue {
    color: #0099ff;
  }

  .under-line {
    text-decoration: underline;
  }

  .el-table .cell,
  .el-table th div,
  .el-table--border td:first-child .cell,
  .el-table--border th:first-child .cell {
    line-height: 55px;
    height: 55px;
  }

  .el-table th,
  .el-table tr {
    font-size: 24px;
  }
}
</style>
